<template>
	<view class="mainbgc" v-if="pageShow">
		<header-top :messageInfo="{typeFlag:true,message:'单据支付',liner:false}"></header-top>
		<view class="mainpadding flexbetween">
			<view class="xiaohong" style="font-size: 30rpx;">本单据未付款：{{dataAll.arrears_price}}元</view>
			<view class="xiaohong" style="font-size: 30rpx;">客户总欠款：{{dataAll.custom.qk_price}}元</view>
		</view>
		<view class="mainpadding ffffff">
			<input type="text" placeholder="输入支付金额" style="font-size: 40rpx; font-weight: bold;color: #0BBDCB;text-align: center;" v-model="pay_price">
		</view>
		<view class="mainpadding_top ffffff">
			<view class="xiaohui" style="font-size: 30rpx;">本次收未付款<text style="color: #00B855;">{{pay_price || 0}}</text>元，剩余未付款
				<text
					class="xiaohong" style="font-size: 30rpx;">{{((Number(dataAll.arrears_price)-Number(pay_price))).toFixed(2)>0?(Number(dataAll.arrears_price)-Number(pay_price)).toFixed(2):0}}</text>元
			</view>
		</view>
		<view class="mainpadding_top ffffff">
			<view class="xiaohui" style="font-size: 30rpx;">余额：<text style="color: #00B855;">{{dataAll.custom.money || 0}}</text>
			</view>
		</view>
		<view class="mainpadding_top ffffff flexbetween ywy">
			<view class="strongtext">支付方式</view>
			<u-radio-group v-model="pay_type" placement="column" circle>
				<u-radio activeColor="#00B855" :customStyle="{marginBottom: '30rpx'}" label="余额支付" name="40"></u-radio>
				<u-radio activeColor="#00B855" :customStyle="{marginBottom: '30rpx'}" label="微信支付" name="10"></u-radio>
				<u-radio activeColor="#00B855" :customStyle="{marginBottom: '30rpx'}" label="支付宝支付" name="20"></u-radio>
				<u-radio activeColor="#00B855" :customStyle="{marginBottom: '30rpx'}" label="银行卡支付" name="30"></u-radio>
				<u-radio activeColor="#00B855" label="现金支付" name="50"></u-radio>
			</u-radio-group>
		</view>
		<view class="mainpadding_top flexbetween ffffff strongtext flexcenter" @click="qmShow=true">
			<text style="color: #00B855;">点击签名</text>
			<u-icon name="arrow-right" color="#00B855" size="20"></u-icon>
		</view>
		<u-popup :show="qmShow" closeable @close="qmShow=false" round="10">
			<view class="mainpadding ffffff radius">
				<view class="xiaohui" style="font-size: 22rpx;">客户请仔细阅读，签字后代表本人确认无误并同意上述内容</view>
				<view style="font-size: 24rpx;color: #333;" class="margin_top2">请签字：</view>
				<view class="sign">
					<csr-sign @finish="finish" ref="csrsign" orientation="portrait" height="500"
						strokeStyle="#ffa126"></csr-sign>
				</view>
				<view class="xiaohong" style="font-size: 22rpx;">注：签字完成后请点击完成签名！</view>
				<view class="flexbetween margin_top">
					<view class="xiaohui" style="font-size: 22rpx;" v-if="dataAll.staff.username">经办人：{{dataAll.staff.username}}</view>
					<view class="xiaohui" style="font-size: 22rpx;">{{httpRequest.returnDate(Number(new Date()))}}
					</view>
				</view>
			</view>
		</u-popup>
		<view class="flexcenter">
			<view class="yesbtn" style="position: inherit;" @click="surePay()">确定签收支付</view>
		</view>
		<template v-if="shareshow">
			<u-popup :show="shareshow" mode="center" :closeOnClickOverlay="false" closeable @close="guanbi"
				round="10">
				<view class="mainpadding_top">
					<view class="titletext margin_top">订单编号：{{pay_data.order_no}}</view>
					<view class="flexcenter" style="margin-top: 30rpx;">
						<uqrcode ref="uqrcode" canvas-id="qrcode" v-bind:value="pay_data.expend.qrcode_url"
							:options="{ margin: 10}">
						</uqrcode>
					</view>
					<view class="margin_top">姓名：{{dataAll.custom.name}}</view>
					<view class="flexbetween margin_top">
						<view class="savebtn" @click="saveimg">保存图片</view>
						<view class="savebtn" style="background-color: #00B855;" @click="shareimg">分享好友</view>
					</view>
				</view>
			</u-popup>
		</template>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				pay_type:"50",//支付方式:10=微信支付,20=支付宝支付,30=银行卡支付,40=余额支付
				pay_price:"",
				sale_order_id:"",
				order_type:"1",//支付类型
				custom_image:"",//客户签名
				httpRequest,
				dataAll:{},
				qmShow: false,
				pageShow:false,
				
				setIntervalPay:null,
				pay_data: {},
				shareshow: false,
			}
		},
		onLoad(options) {
			this.sale_order_id = options.id
			this.init()
		},
		onUnload() {
			clearInterval(this.setIntervalPay)
		},
		methods: {
			shareimg(){
				this.$refs.uqrcode.toTempFilePath({
				  success: res => {
					  this.uploadImageServicefx(res.tempFilePath)
				  }
				});
			},
			uploadImageServicefx(url) {
				let _this = this;
				httpRequest.uploadFile('/api/common/upload', url).then(res => {
					this.zfshare(_this.pay_data.order_no,res.fullurl)
				}).catch(err => {});
			},
			finish(e){
				let _this = this;
				this.qmShow = false
				httpRequest.uploadFile('/api/common/upload', e).then(res => {
					this.custom_image = res.fullurl
				}).catch(err => {
				});
			},
			surePay(){
				if(!this.pay_price){
					httpRequest.toast("请输入支付金额！")
					return false
				}
				if (Number(this.pay_price) > Number(this.dataAll.arrears_price)) {
					httpRequest.toast("支付金额不能大于欠款金额！")
					return false
				}
				// if(this.custom_image==""){
				// 	httpRequest.toast("请签名并点击完成！")
				// 	return false
				// }
				if (this.pay_type == 10) {//微信支付
					this.scanbarCode()
					return false
				}
				httpRequest.request('/dhtapi/Saleorder/addSaleOrderPay', 'GET', {
					sale_order_id: this.sale_order_id,
					pay_type: this.pay_type,
					pay_price: this.pay_price,
					order_type: 2,
					custom_image: this.custom_image
				}, false, false, true).then(res => {
					if (res.code == 1) {
						if(this.pay_type==20){//支付宝支付、
							this.pay_data = res.data
							this.shareshow = true
							this.setIntervalPay = setInterval(() => {
								this.getpaytype(res.data.query_url) //获取支付宝的支付状态，是否支付完成
							}, 1000)
						}else if(this.pay_type==40 || this.pay_type==50 || this.dataAll.pay_type==30){//余额支付成功
							httpRequest.toast(res.msg)
							setTimeout(()=>{
								uni.navigateBack(1)
							},1000)
						}
					}else{
						httpRequest.toast(res.msg)
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			scanbarCode() {
				let that = this
				uni.scanCode({
					scanType: ['qrCode'],
					success: function(res) {
						that.chuangjiandd(res.result)
					},
					fail(err) {
						console.log('错误信息：' + err);
					}
				});
			},
			chuangjiandd(val) {
				httpRequest.request('/dhtapi/Saleorder/addSaleOrderPay', 'GET', {
					sale_order_id: this.sale_order_id,
					pay_type: this.pay_type,
					pay_price: this.pay_price,
					order_type: 2,
					custom_image: this.custom_image,
					auth_code: val
				}).then(res => {
					if (res.code == 1) {
						this.setIntervalPay = setInterval(() => {
							this.getpaytype(res.data.query_url) //获取微信用户的支付状态，是否支付完成
						}, 1000)
					}
				})
			},
			getpaytype(url) {
				uni.request({
					url: url,
					data: {},
					method: "GET", //'GET','POST'
					dataType: 'json',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					success: (res) => {
						console.log(res, "获取支付信息获取支付信息");
						if(res.data.status=="succeeded"){//支付成功
							httpRequest.toast("客户支付成功")
							clearInterval(this.setIntervalPay)
							setTimeout(()=>{
								uni.navigateBack(1)
							},1000)
						}
					},
					fail: (res) => {
					}
				})
			},
			guanbi(){
				clearInterval(this.setIntervalPay)
				// this.shareshow = false
				uni.navigateBack(1)
			},
			saveimg() {
				this.$refs.uqrcode.save({
					success: () => {
						uni.showToast({
							title: '保存成功'
						});
					}
				});
			},
			init() {
				let _this = this;
				httpRequest.request('/dhtapi/Saleorder/detail', 'GET', {
					id: this.sale_order_id,
					lat: "35.17466",
					lng: "109.67307"
				}, false, false, true).then(res => {
					this.dataAll = res.data
					// this.pay_price = this.dataAll.arrears_price
					this.pageShow = true
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-radio-group {
		flex: none !important;
	}
	.flex1 {
		min-width: 200rpx;
		max-width: 200rpx;
	}
	.selecticon {
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		border: 1rpx solid #00B855;
		background-color: #00B855;
	
		image {
			width: 20rpx;
			height: 12rpx;
			margin-bottom: 10rpx;
			margin-left: 5rpx;
		}
	}
</style>
